﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="template.aspx.cs" Inherits="template" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/scripts/NinJa.js"></script>
    <script type="text/javascript" src="/scripts/NinJaVisuals.js"></script>
    <script type="text/javascript" src="/scripts/NinJaControls.js"></script>
    <script type="text/javascript">
        function contact(name, email, phone) {
            this.Name = name;
            this.Email = email;
            this.Phone = phone;
            this.ID = contact.id++;
        }
        contact.id = 0;

        var contacts = [new contact("Travis", "dahrkdaiz@email.com", "8655551234"),
                        new contact("Margaret", "margaret@email.com", "8659994567"),
                        new contact("David", "david@email.com", "8657774587"),
                        new contact("Mark", "mark@email.com", "8653332145")];

        function updateContact() {
            $Template("DivContact").Bind($ComboBox("CmbContacts").SelectedOption().Tag);
        }

        Page.OnLoad.Add(function () {
            $ComboBox("CmbContacts").Bind(contacts).OnSelectionChanged.Add(updateContact); ;
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <select id="CmbContacts" bindtext="Name" bindvalue="id" bindtag="true"></select>
    <div class="template" id="DivContact">
        <table class="form">
            <colgroup>
                <col align="right" style="font-weight: bold" />
            </colgroup>
            <tr>
                <td>Name</td><td>{Name}</td>
            </tr>
            <tr>
                <td>Email</td><td><a href="mailto:{Email}"><span>{Email}</span></a></td>
            </tr>
            <tr>
                <td>Phone</td><td>{Phone.FormatPhone}</td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>
